{% extends 'base.html' %}
{% block title %}编辑用户{% endblock %}
{% block body %}
    <form style="width: 800px;margin: 0 auto;text-align: center;" method="post" action="/auth/update/message"
          enctype="multipart/form-data">
        <div style="padding-bottom: 10px">
            <img id="photo_change" src="{{ user.photo }}" class="rounded-circle"
                 style="width: 150px;height: auto">
        </div>
        <div class="form-group row">
            <label for="inputPassword" class="col-sm-2 col-form-label">编号:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="id" name="id" value="{{ user.id }}" readonly>
            </div>
        </div>
        <div class="form-group row">
            <label for="inputPassword" class="col-sm-2 col-form-label">姓名:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="username" name="username" value="{{ user.username }}"
                       readonly>
            </div>
        </div>
        <div class="form-group row">
            <label for="inputPassword" class="col-sm-2 col-form-label">邮箱:</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="email" value="{{ user.email }}">
                <p class="help-block" id="email_inform"></p>
            </div>
        </div>
        <div class="form-group row">
            <label for="inputPassword" class="col-sm-2 col-form-label">旧密码:</label>
            <div class="col-sm-10">
                <input type="text" id="old_pwd" class="form-control" name="old_password">
                <p id="old_inform"></p>
            </div>
        </div>
        <div class="form-group row">
            <label for="inputPassword" class="col-sm-2 col-form-label">新密码:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="new_pwd" name="new_password" placeholder="请选输入旧密码!"
                       disabled>
                <p class="help-block" id="new_inform"></p>
            </div>
        </div>
        <div class="form-group row">
            <label for="inputPassword" class="col-sm-2 col-form-label">选择新头像:</label>
            <div class="col-sm-6">
                <input type="file" id="exampleInputFile" name="photo">
            </div>
            <p class="help-block" id="photo_inform"></p>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
    </div>
    <script>
        $("#exampleInputFile").change(function () {
            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                $("#photo_change").attr("src", reader.result);
            }
        })
        $("#old_pwd").blur(function () {
            $.post(
                "/auth/confirm/pwd",
                {"old_password": $("#old_pwd").val(), "id": $("#id").val()},
                function (data) {
                    if (data.code == 200) {
                        $("#new_pwd").prop("disabled", false)
                        $("#old_inform").html("<span style='color: green'>密码正确</span>");
                        $("#new_pwd").attr("placeholder", "请输入新密码")

                    } else {
                        $("#new_pwd").prop("disabled", true)
                        $("#new_pwd").attr("placeholder", "请选输入旧密码")
                        $("#old_inform").html("<span style='color: red'>密码错误</span>");
                    }
                })
        })
    </script>
{% endblock %}